<template>
	<view class="home">
		<view class="content">
		<!-- 自定义组件 -->
		<navbar v-model="searchVal"></navbar>
		</view>			
		<!--推荐商品区-》改成茶叶宣传卡卡片轮播图-->
		<view class="hot_goods">
			<swiper indicator-dots circular autoplay="true" interval="3000">
				<swiper-item v-for="item in swipers" :key="item.id">
					<image mode="scaleToFill" :src="item.img"></image>
				</swiper-item>	
			</swiper>	
		</view>
		
	</view>
</template>

<script>
	//easyCom 直接引入，局部引入,组件名/组件名.vue是一致的可以用
	export default{
		data(){
			return{
				searchVal:'',
				swipers:[],
				hotList:[],
				img:"https://hbimg.b0.upaiyun.com/149547604c097a5142427b528444691e686f664c12d10-5JfXzF_fw658"
			}
		},
		onLoad(){
			this.getSwipers()
			this.getHotList()
		},
		methods:{
			getSwipers(){
				console.log('获取轮播图')
				uni.request({
					url:this.$baseUrl+'swiperList',
					success:res=>{
						
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						this.swipers=res.data.list
						
					}
				})
			},
			getHotList(){
				uni.request({
					url:this.$baseUrl+'hotList',
					success:res=>{
						
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						this.hotList=res.data.list
						
					}
				})
			},
			searchFn(){
				//跳转到茶叶列表页面并传递搜索条件触发搜索时间
				let search=this.searchVal
				console.log("首页搜索内容",search)
				//本地缓存需要传递的参数
				uni.setStorageSync('e',{searchval:search, val:'switchTab'})
				uni.switchTab({
					url: '../message/message',
				})
			}
		}
	}
</script>

<style lang="scss">
	.home{		
		swiper{
			width: 750rpx;
			height: 100%;
			padding: 10px;
			image{
				height: 100%;
				width: 100%;
			}
		}
	}

	.nav_item{
		width: 25%;
		text-align: center;
		view{
			width: 120rpx;
			height: 120rpx;
		}
	}
	.hot_goods{
		background-color: white;
		overflow: hidden;
		height: 560px;
		.tit{
			height: 50px;
			line-height: 50px;
			color: #4CD964;
			text-align: center;
			letter-spacing: 20px;
			margin:7rpx 0;
		}
		.good_list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			//padding: 0 15rpx;
			
		}
	}
</style>
